<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  let option = {
    legend: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {},
    series: [
      {
        type: "line",
        // name: "line1",
        data: [{ name: "first", value: 12 }, 34, 25, 67],
      },
      {
        type: "bar",
        // name: "bar1",
        data: [14, 56, 23, 76],
      },
      {
        type: "graph",
        coordinateSystem: "cartesian2d",
        data: [
          {
            name: "alex",
            value: 100,
            x: 20,
            y: 40,
          },
          {
            name: "lily",
            value: 80,
            x: 70,
            y: 20,
          },
          {
            name: "luna",
            value: 60,
            x: 50,
            y: 30,
          },
        ],
        links: [
          {
            source: "lily",
            target: "alex",
          },
        ],
      },
      {
        type: "custom",
        coordinateSystem: "cartesian2d",
        renderItem: (params, api) => {
          let pos = api.coord([0, 0]);
          return {
            type: "group",
            children: [
              {
                type: "circle",
                name: "my_c1",
                shape: {
                  cx: pos[0],
                  cy: pos[1],
                  r: 5,
                },
                style: api.style(),
              }, 
              {
                type: "rect",
                name: "my_c2",
                shape: {
                  x: 40,
                  y: 40,
                  width: 20,
                  height: 20,
                  rx: pos[0],
                  ry: pos[1],
                  r: 5,
                },
                style: api.style(),
              }, 
            ],
          };
        },
        data: [[12,33]],
        z: 999,
      },
    ],
  };
  myEchart.setOption(option);
  // myecharts.on(事件,监听执行方法,this指向?)
  // myEchart.on('click', function(value) {
  //   console.log(value)
  // })
  // myecharts.on(事件,过滤条件,监听执行方法,this指向?)
  // 过滤条件分为
  // 1.字符串，按图表类型来series.xxxx
  // myEchart.on('click', 'series.line', function(value) {
  //   console.log(value)
  // })
  /** 2.对象指定其他筛选项
      seriesIndex-按图表顺序筛选
      name-按名字（数据名）
      dataIndex-data数组里的第几个数据
      dataType-关系图中有用，为node意思是关系图中的节点，edge意思为边
      element-自定义图表有用，规定自定义图表返回的那个节点绑定事件
*/

  myEchart.on(
    "click",
    {
      // seriesIndex: 1,
      // name: "first", // name 是数据的name,不是系列的name
      // dataIndex: 2
      // dataType: 'edge',
      // dataType: 'node',
      // element: "my_c1",
    },
    function (value) {
      console.log(value);
    }
  );
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
